Verwendung von Containergrößen- und Stilabfragen

Containergrößen-Abfragen werden durch eine Größenbedingung gefiltert. Die zugehörigen Stile werden auf enthaltene Elemente angewendet, wenn das Containerelement als Container deklariert wurde und die Containerbedingung für dieses Element zutrifft. Der Größencontainer eines Elements ist der nächstgelegene Vorgänger mit Eindämmung.

Elemente werden als Größenabfragecontainer deklariert, indem man ihre container-type-Eigenschaft (oder die container-Kurzschrift) auf size oder inline-size setzt.

@container (orientation: landscape) {
  /* styles applied to descendants of this size container */
}

.sizeContainer {
  container-type: size;
}

Die Deklaration von Größenabfragecontainern fügt ihnen Eindämmung hinzu. Dies ist eine Leistungsnotwendigkeit — die Größe jedes Elements im DOM ständig abzufragen, wäre schlecht für die Leistung und Benutzererfahrung. Außerdem könnte eine unendliche Schleife auftreten, wenn ein Nachkommenstil die Größe des Containerelements änderte.

In einer Containergrößen-Abfrage enthält die <container-condition> eine oder mehrere <size-query>s. Jede Größenabfrage enthält einen Größenmerkmalnamen, einen Vergleichsoperator und einen Wert. Die Größenmerkmale, die abgefragt werden können, beschränken sich auf width, height, inline-size, block-size, aspect-ratio und orientation. Die boolesche Syntax und Logik, die eine oder mehrere <size-query>s kombiniert, ist dieselbe wie bei @media-Größenmerkmalabfragen.

form {
  container-type: inline-size;
}

@container (10em <= width <= 20em) {
  /* styles */
}

Die <container-condition> in diesem Beispiel enthält eine einzelne <size-query> — (10em <= width <= 20em). In diesem Fall sind alle <form>-Elemente potenzielle Treffer für jede unbenannte Containerabfrage. Die innerhalb unserer Containerabfrage deklarierten Stile gelten für die Nachkommen aller Formulare mit einer Breite zwischen 10em und 30em, einschließlich.

Eine <container-condition> kann einen optionalen, auf Groß- und Kleinschreibung sensitiven, container-name enthalten. Ein Containername macht die Containerbedingung spezifischer — sie wird nur an Elementen ausgewertet, die diesen Namen in der container-name-Eigenschaft gesetzt haben.

Die container-name-Eigenschaft gibt eine Liste von Abfrage-<container-name>-Werten an, die in @container-Regeln verwendet werden können; dies sind auf Groß- und Kleinschreibung sensitive <ident>-Werte. Die Containernamen ermöglichen es, gezielt jeden containerähnlichen Vorfahren des Elements anzusprechen. Ohne einen Containername stimmt die Abfrage nur mit dem nächstgelegenen containerähnlichen Vorfahren überein.

@container [ [ <container-name> ]? <container-query> ]# {
  /* <stylesheet> */
}

Nachdem Sie Namen zu Ihren @container-Regeln hinzugefügt haben, können Sie die container-name-Eigenschaft oder die container-Kurzschrift verwenden, um bestimmte Containerelemente anzusprechen. Die Stile innerhalb der benannten @container-Regeln werden nur auf passende Elemente innerhalb von Containern mit diesen gesetzten Namen angewendet, die die Containerabfragen erfüllen.

@container card (orientation: landscape) {
  /* styles */
}

.todo-panel > li {
  container-type: inline-size;
  container-name: card;
}

Im obigen Beispiel gelten die Stile innerhalb des Containerabfrageblocks für die Nachkommen aller <li>-Elemente mit einer Breite, die größer als ihre Höhe ist. Beachten Sie, dass auch andere Elemente mit container-name: card, die die Größenabfrage erfüllen, diese Stile auf die Nachkommen ihrer Elemente anwenden werden.

@container wide (min-width: 20em) {
  /* styles applied to descendants of wide .sizeContainer */
}

@container narrow (max-width: 20em) {
  /* styles applied to descendants of narrow .sizeContainer */
}

.sizeContainer {
  container-type: size;
  container-name: wide narrow;
}

Im obigen Beispiel hat das Element zwei Containernamen, wide und narrow. Die Nachkommen aller Elemente mit class="sizeContainer" bekommen die Stile aus der wide- oder narrow-Abfrage angewendet (oder beide, wenn ein Element genau 20em breit ist).

Der Standardwert container-type: normal verhindert, dass der Container ein Größencontainer wird, aber er kann trotzdem ein Stilcontainer sein. Der Standardwert container-name: none besagt, dass der Container keinen Namen hat, verhindert jedoch nicht, dass das Element mit unbenannten Abfragen übereinstimmt.

Mit Containerabfragen sind wir nicht nur auf Größenabfragen beschränkt! Sie können auch die Stileigenschaften eines Containers abfragen.

Eine Containerstil-Abfrage ist eine @container-Abfrage, die berechnete Stile des Containerelements auswertet, wie in einer oder mehreren style()-Funktionsnotationen definiert. Die boolesche Syntax und Logik, die zur Kombination von Stileigenschaften in eine Stilabfrage verwendet wird, ist dieselbe wie bei CSS-Featureabfragen. Der einzige Unterschied ist der Funktionsname — style() innerhalb eines <style-feature> im Gegensatz zu supports() innerhalb einer <support-condition>:

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Der Parameter jeder style()-Funktion ist ein einzelnes <style-feature>. Entsprechend der CSS-Eindämmungsspezifikation kann ein <style-feature> eine gültige CSS-Deklaration, eine CSS-Eigenschaft oder ein <custom-property-name> sein. Das einzige momentan unterstützte Stilelement sind benutzerdefinierte Eigenschaften, mit oder ohne Wert. Siehe die Browser-Kompatibilitätstabelle.

Wenn das <style-feature> einen Wert enthält, wird die Stilabfrage als wahr ausgewertet, wenn der berechnete Wert der benutzerdefinierten Eigenschaft (oder, in Zukunft, der CSS-Deklaration), die als style()-Argument übergeben wird, für den abgefragten Container zutrifft. Andernfalls wird es als falsch aufgelöst. Ein Stilelement ohne Wert wird als wahr ausgewertet, wenn der berechnete Wert von dem Anfangswert für die gegebene Eigenschaft abweicht.

In Zukunft werden wir Stilabfragen wie folgt schreiben können:

@container style(color: green) and style(background-color: transparent),
    not style(background-color: red),
    style(--themeBackground),
    style(--themeColor: blue) or style(--themeColor: purple),
    (max-width: 100vw) and style(max-width: 600px) {
  /* <stylesheet> */
}

Die style()-Funktionsnotation wird verwendet, um Stilabfragen von Größenabfragen zu unterscheiden. Obwohl noch nicht unterstützt, werden wir schließlich reguläre CSS-Deklarationen wie max-width: 100vw abfragen können. Die Abfrage @container (max-width: 100vw) ist eine Größenabfrage; Eindämmung mit container-type oder die container-Kurzschrift ist erforderlich. Diese Abfrage gibt true zurück, wenn der Container 100vw oder kleiner ist. Das unterscheidet sich von der Abfrage @container style(max-width: 100vw), die eine Stilabfrage ist; wenn sie unterstützt wird, gibt diese Abfrage true zurück, wenn der Container einen max-width-Wert von 100vw hat.

Solange Stilabfragen für reguläre CSS-Deklarationen und -Eigenschaften nicht unterstützt werden, sind wir darauf beschränkt, nur benutzerdefinierte Eigenschaften als style()-Parameter einzuschließen, mit oder ohne Wert:

@container style(--themeBackground),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Einige Dinge, die bereits erwähnt wurden, aber wichtig sind, um sie zu erinnern:

• Alle Elemente können Stilabfragecontainer sein; das Setzen eines container-type ist nicht erforderlich. Wenn Nachkommenstile die berechneten Stile eines Vorfahren nicht beeinflussen, ist Eindämmung nicht notwendig.
• Eine <container-condition> kann sowohl Stil- als auch Größenmerkmale enthalten. Wenn Sie Größenmerkmale in Ihre Abfrage aufnehmen, stellen Sie sicher, dass Ihre Containerelemente ein container-type von size oder inline-size gesetzt haben.
• Wenn Sie nicht möchten, dass ein Element jemals als Container betrachtet wird, geben Sie ihm einen container-name, der nicht verwendet wird. Das Setzen von container-name: none entfernt alle Abfragenamen, die einem Container zugeordnet sind; es verhindert nicht, dass das Element ein Stilkcontainer wird.
• Zum Zeitpunkt dieses Schreibens (Februar 2024) funktionieren Containerstil-Abfragen nur mit CSS-Benutzereigenschaftswerten in der style()-Abfrage.

Nun, lassen Sie uns einen näheren Blick auf die verschiedenen <style-feature>-Typen werfen.

Stilabfragen für benutzerdefinierte Eigenschaften ermöglichen es Ihnen, die benutzerdefinierten Eigenschaften, auch "CSS-Variablen" genannt, eines übergeordneten Elements abzufragen. Diese sind in einem <style-query> enthalten, genau wie eine reguläre CSS-Eigenschaft innerhalb einer Funktionsabfrage: entweder mit oder ohne Wert.

Standalone-Abfragen benutzerdefinierter Eigenschaften

Der <style-query>-Parameter der style()-Funktionsnotation kann nur einen CSS-Variablennamen enthalten; eine benutzerdefinierte Eigenschaft ohne Wert. Wenn kein Wert enthalten ist, gibt die Abfrage false zurück, wenn der Wert derselbe ist wie der Wert des initial-value-Descriptors innerhalb der @property-Regel, falls vorhanden. Die Stilabfrage wird true zurückgeben und mit allen Elementen übereinstimmen, die einen benutzerdefinierten Eigenschaftswert haben, der vom initial-value abweicht oder für alle Elemente, die eine benutzerdefinierte Eigenschaft mit einem beliebigen Wert haben, wenn die benutzerdefinierte Eigenschaft deklariert wurde, ohne registriert zu sein.

Nicht registrierte benutzerdefinierte Eigenschaften

Wenn CSS-Variablen über eine CSS-Benutzereigenschaftswertzuweisung eingeführt werden, geben wertlose benutzerdefinierte Eigenschaftsabfragen immer true zurück.

:root {
  --theme-color: rebeccapurple;
}

@container style(--theme-color) {
  /* <stylesheet> */
}

In diesem Beispiel stimmt die Containerabfrage mit dem Element überein, auf dem die Eigenschaft --theme-color deklariert wurde, und mit allen seinen Nachkommen. Da die CSS-Variable --theme-color auf der :root deklariert wurde, wird die Stilabfrage style(--theme-color) für jedes Element innerhalb dieses DOM-Nodes wahr sein.

Registrierte Eigenschaften

Das Verhalten registrierter benutzerdefinierter Eigenschaften ist anders. Wenn sie explizit mit der @property-CSS-Regel oder via JavaScript mit CSS.registerProperty() definiert werden, gibt die Stilabfrage style(--theme-color) nur true zurück, wenn der berechnete Wert für --theme-color des Elements vom initial-value, das in der ursprünglichen Definition dieser benutzerdefinierten Eigenschaft festgelegt wurde, abweicht.

@property --theme-color {
  initial-value: rebeccapurple;
  inherits: true;
}

:root {
  --theme-color: rebeccapurple;
}

main {
  --theme-color: blue;
}

@container style(--theme-color) {
  /* <stylesheet> */
}

In diesem Beispiel stimmt das :root-Element NICHT mit der Stilabfrage überein, da der Wert der benutzerdefinierten Eigenschaft derselbe ist wie der initial-value-Wert. Der benutzerdefinierte Eigenschaftswert für das Element (und alle Elemente, die den Wert erben) bleibt rebeccapurple. Nur Elemente, die sich vom Anfangswert unterscheiden, in diesem Fall das <main> und seine Nachkommen, die jenen geänderten Wert erben, passen.

Benutzerdefinierte Eigenschaft mit einem Wert

Wenn eine Stilabfrage einen Wert für die benutzerdefinierte Eigenschaft enthält, muss der berechnete Wert des Elements für diese Eigenschaft genau übereinstimmen, wobei äquivalente Werte nur dann übereinstimmen, wenn die benutzerdefinierte Eigenschaft mit einer @property-Regel (oder einem Aufruf der Methode CSS.registerProperty()) definiert wurde, die einen syntax-Descriptor enthält.

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Diese Containerstil-Abfrage stimmt mit jedem Element überein, das blue als berechneten Wert der benutzerdefinierten Eigenschaft --accent-color hat.

In diesem Fall stimmen andere Farbwerte, die dem sRGB-blue äquivalent sind (wie zum Beispiel der Hexadezimalcode #0000ff), nur überein, wenn die --accent-color-Eigenschaft als Farbe mit @property oder CSS.registerProperty() definiert wurde, zum Beispiel:

@property --accent-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #00f;
}

In diesem Fall, wenn der Wert von --accent-color auf blue, #00f, #0000ff, rgb(0 0 255 / 1) oder rgb(0% 0% 100%) gesetzt wird, würde er für @container style(--accent-color: blue) true zurückgeben.

Beispiel

In diesem Beispiel haben wir ein <fieldset> mit vier Optionsfeldern. Die vierte Option enthält ein Text-<input> zum Eingeben einer benutzerdefinierten Farbe.

<fieldset>
  <legend>Change the value of <code>--theme</code></legend>
  <ol>
    <li>
      <input type="radio" name="selection" value="red" id="red" />
      <label for="red">--theme: red;</label>
    </li>
    <li>
      <input type="radio" name="selection" value="green" id="green" />
      <label for="green">--theme: green</label>
    </li>
    <li>
      <input type="radio" name="selection" value="blue" id="blue" />
      <label for="blue">--theme: blue</label>
    </li>
    <li>
      <input type="radio" name="selection" value="currentcolor" id="other" />
      <label for="other">Other</label>
      <label for="color">color:</label>
      <input text="checkbox" name="selection" value="currentcolor" id="color" />
    </li>
  </ol>
</fieldset>
<output>I change colors</output>

JavaScript aktualisiert den Wert der CSS---theme-Variable auf dem <body>-Element, das ein Vorfahre der <fieldset>- und <output>-Elemente ist, wann immer ein Optionsfeld ausgewählt wird. Wenn das textbasierte <input> aktualisiert wird, wird der value des anderen Optionsfelds nur dann aktualisiert, wenn das other Optionsfeld aktiviert ist, was wiederum den Wert von --theme aktualisiert.

const radios = document.querySelectorAll('input[name="selection"]');
const body = document.querySelector("body");
const other = document.getElementById("other");
const color = document.getElementById("color");

for (const radio of radios) {
  radio.addEventListener("change", (e) => {
    body.style.setProperty("--theme", e.target.value);
  });
}
color.addEventListener("input", (e) => {
  other.style.setProperty("value", e.target.value);
  if (other.checked) {
    body.style.setProperty("--theme", e.target.value);
  }
});

Wir verwenden die @property-Regel, um eine CSS-Variable --theme als <color>-Wert zu definieren und den initial-value auf #00F zu setzen, damit äquivalente Farben unabhängig von der verwendeten Syntax übereinstimmen (zum Beispiel ist #F00 gleich rgb(255 0 0), #ff0000 und red).

@property --theme {
  syntax: "<color>";
  inherits: true;
  initial-value: #f00;
}

output {
  padding: 3px 5px;
  margin-top: 5px;
}

Die erste Stilmerkmalsabfrage ist eine benutzerdefinierte Eigenschaft ohne Wert. Dieser Abfragetyp gibt true zurück, wenn der berechnete Wert für den benutzerdefinierten Eigenschaftswert vom initial-value für diese Eigenschaft abweicht. In diesem Fall wird es wahr sein, wenn der Wert von --theme ein anderer Wert als ein äquivalenter Syntaxwert von #f00 (wie red) ist. Wenn es wahr ist, wird das <output> einen 5px gepunkteten Umriss haben. Die Outline-Farbe ist der aktuelle Wert von --theme. Die Standardtextfarbe ist grau.

@container style(--theme) {
  output {
    outline: 5px dotted var(--theme);
    color: #777;
  }
}

Die zweite und dritte Stilmerkmalsabfragen enthalten Werte für die benutzerdefinierte Eigenschaft. Diese stimmen dann überein, wenn der --theme-Wert des Containers eine äquivalente Farbe zum angegebenen Wert ist, auch wenn dieser Wert der gleiche ist wie der Initialwert. Die erste Abfrage stimmt mit Elementen überein, deren --theme-Wert äquivalent zu red, blue oder green ist. Wenn das der Fall ist, wird die color die Farbe des aktuellen Wertes von --theme sein (im Fall von blue und green, übergreifend die graue Farbe, die in der ersten Stilabfrage gesetzt wurde).

Die zweite Stilabfrage besagt, dass, wenn --theme äquivalent zu red ist, der Inhalt des <output> auch fett sein wird. Wir haben dies getan, um besser zu demonstrieren, dass die Containerabfrage ein Treffer ist.

@container style(--theme: green) or style(--theme: blue) or style(--theme: red) {
  output {
    color: var(--theme);
  }
}

@container style(--theme: red) {
  output {
    font-weight: bold;
  }
}

Versuchen Sie, verschiedene Farbwerte in das Textfeld einzugeben. Ihnen fällt vielleicht auf, dass Werte, die sRGB-Äquivalente von red sind, das <output>-Element rot machen — da es mit style(--theme: red) übereinstimmt — und den Umriss entfernen, weil style(--theme) false zurückgibt, wenn der Wert des Elements für --theme derselbe ist wie der Anfangswert für --theme, der durch die @property-Regel definiert wurde. Jeder nicht-rote gültige sRGB-Farbwert, einschließlich currentcolor oder hsl(180 100% 50%) usw., führt die erste Stilabfrage zu true; sie sind Werte, die sich vom initial-value unterscheiden.

Da wir syntax: "<color>"; gesetzt haben, kann der CSS-Variable nur gültige <color>-Werte zugewiesen werden. Gültige Werte für die color-Eigenschaft, die keine gültigen <color>-Werte sind, wie unset oder inherit, sind für diese benutzerdefinierte Eigenschaft ungültig und werden ignoriert.

Wenn Sie unset oder gibberish eingeben, aktualisiert das JavaScript den style auf dem <body> zu --theme: unset oder --theme: gibberish. Keines davon sind Farben. Beide sind ungültig und werden ignoriert. Dies bedeutet, dass der Anfangswert geerbt und unverändert bleibt, style(--theme) false zurückgibt und style(--theme: red) true.

Containerabfragen können innerhalb anderer Containerabfragen verschachtelt werden. Die im Inneren mehrerer verschachtelter Containerabfragen definierten Stile werden angewendet, wenn alle umgebenden Containerabfragen wahr sind.

@container style(--theme: red) {
  output {
    outline: 1px dotted;
  }
  @container style(--theme: purple) {
    output {
      outline: 5px dotted;
    }
  }
}

In diesem Fall wird das <output> einen 5px gepunkteten Rahmen haben, wenn es in einem Container verschachtelt ist, in dem --theme: purple gesetzt ist, und dieser Container innerhalb eines Containers verschachtelt ist, dessen --theme-Wert red ist.

Noch in keinem Browser unterstützt, kann die style()-Funktionsnotation reguläre CSS-Deklarationen einschließlich CSS-Eigenschaften und Eigenschaftswertpaaren enthalten.

@container style(font-weight: bold) {
  b,
  strong {
    background: yellow;
  }
}

Wenn unterstützt, wird dieses grundlegende Beispiel die Hintergrundfarbe von <b>- und <strong>-Elementen gelb machen, wenn der Elternteil bereits bold ist.

Das Matching erfolgt gegen den berechneten Wert des übergeordneten Containers; wenn der berechnete font-weight des Elternteils bold (nicht bolder oder 900) ist, gibt es ein Match. Genau wie bei benutzerdefinierten Eigenschafts-Containerstilabfragen mussten wir keine Elemente als Stilcontainer definieren, da alle Elemente standardmäßig Stilcontainer sind. Solange ein Element keinen container-name gesetzt hat, wird es, wenn es font-weight: bold gesetzt oder geerbt hat, übereinstimmen.

Stilmerkmale, die eine Kurzschreibweiseigenschaft abfragen, sind dann wahr, wenn die berechneten Werte jedes ihrer Langform-Eigenschaften übereinstimmen, und anders falsch. Zum Beispiel wird @container style(border: 2px solid red) wahr, wenn alle 12 Langform-Eigenschaften (border-bottom-style, usw.), aus denen diese Kurzform besteht, auf dieselben äquivalenten Werte gesetzt sind.

Die globalen CSS-Werte revert und revert-layer sind als Werte in einem <style-feature> ungültig und führen dazu, dass die Containerstilabfrage falsch ist.

Tragen Sie die Stile, die Sie in der Stilabfrage auf das Element abfragen, nicht auf das Element an, das Sie mit dieser Abfrage gestalten, da dies zu einer Endlosschleife führen kann.

Es wird erwartet, dass Stilabfragen auch Eigenschaften in einem booleschen Kontext akzeptieren werden. Die Stilabfrage wird false zurückgeben, wenn der Wert der Eigenschaft der Anfangswert für diese Eigenschaft ist (wenn er nicht geändert wurde), und andernfalls true.

@container style(font-weight) {
}

Das obige Beispiel wird true für jedes Element zurückgeben, das einen font-weight-Wert hat, der von seinem Anfangswert abweicht. Benutzeragenten-Stylesheets setzen font-weight: bold für heading- und <th>-Elemente zum Beispiel. Einige Browser setzen <strong> und <b> auf bold, andere auf bolder. <optgroup> haben ebenfalls manchmal einen font-weight, der nicht normal ist und von dem Benutzeragenten gesetzt wird. Solange der font-weight-Wert des Elements nicht der Standardwert für jenen Benutzeragenten ist, gibt die Stilabfrage true zurück.

Diese Funktionen werden derzeit in keinem Browser unterstützt.

• Media-Abfragen
• CSS @container-Regel
• CSS contain-Eigenschaft
• CSS container-Kurzschrift
• CSS container-name-Eigenschaft
• Verwendung von Container-Scrollstatus-Abfragen
• Verständnis von aspect-ratio
• Einführung in Stilabfragen (2022)
• Style queries via una.im (2022)